<template>
  <div class="start-configuration">
    <je-form-item :label="$t('startConfiguration.canEveryoneStart')" name="canEveryoneStart">
      <je-switch v-model:value="formState.canEveryoneStart" mode="checkbox" />
      <span class="prompt">{{ $t('startConfiguration.canEveryoneStartContext') }}</span>
    </je-form-item>
    <je-form-item
      :label="$t('startConfiguration.canBootableRoleNames')"
      name="canEveryoneRolesName"
    >
      <je-tree-select
        v-model:model="formState"
        v-model:value="formState.canEveryoneRolesName"
        :disabled="formState.canEveryoneStart == '1'"
        config-info="JE_RBAC_ROLETREE,canEveryoneRolesName~canEveryoneRolesId,text~id,M"
        :select-options="selectOptions"
      />
    </je-form-item>
    <je-form-item name="startExpression">
      <template #label>
        <div class="custom-label">
          <i
            class="fas fa-bolt"
            :style="`cursor: pointer;color:${
              formState.startExpressionFn != undefined && formState.startExpressionFn != ''
                ? '#FAC502'
                : 'rgb(141, 152, 171)'
            }`"
            @click="onClick"
          ></i>
          {{ $t('startConfiguration.startExpression') }}
        </div>
      </template>
      <je-input v-model:value="formState.startExpression" />
    </je-form-item>
    <je-form-item label="&nbsp;" name="null">
      <div class="info">
        <span class="p">
          {{ $t('startConfiguration.startExpressionComments') }}
        </span>
      </div>
    </je-form-item>
    <JsEditor
      v-if="modalType"
      :start-expression-fn="formState.startExpressionFn"
      :work-flow-info="workFlowInfo"
      @changeData="changeData"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Form, Input, InputSelect, Switch } from '@jecloud/ui';
  import JsEditor from '@/components/event-modal/js-editor.vue';

  export default defineComponent({
    name: 'StartConfiguration',
    components: {
      JeFormItem: Form.Item,
      JeInput: Input,
      JeTreeSelect: InputSelect.Tree,
      JsEditor,
      JeSwitch: Switch,
    },
    props: {
      startupSettings: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfId: {
        type: String,
        default: '',
      },
      workFlowInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      //表单数据
      const formState = ref(props.startupSettings);
      const modalType = ref(false);

      //主数据改变刷新数据
      watch(
        () => props.wfId,
        () => {
          formState.value = props.startupSettings;
        },
        { deep: true },
      );

      //弹窗js代码编辑器
      const onClick = () => {
        modalType.value = true;
      };

      //弹窗js代码编辑器关闭回调
      const changeData = (type, val) => {
        if (type == 'save') {
          formState.value.startExpressionFn = val;
        } else {
          modalType.value = false;
        }
      };
      //智能剔除
      const selectOptions = {
        selectExp: "'{nodeInfoType}' != 'folder'",
      };

      return {
        formState,
        modalType,
        onClick,
        changeData,
        selectOptions,
      };
    },
  });
</script>

<style lang="less" scoped>
  .start-configuration {
    .custom-label {
      cursor: pointer;
    }
  }
</style>
